<template>
	<view class="step_d_row">
		<view class="title"> 设置训练计划 </view>
		<view class="from_row">
			<view class="from_item">
				<view class="label"> 选择可训练日期 </view>
				<view class="value">
					<view class="select_row">
						<view :class="{ select_item: true, active: trainingDate.includes(item.value) }"
							@click="handleSelectDate(item.value)" v-for="(item, index) in columns" :key="item">
							{{ item.label }}
						</view>
					</view>
				</view>
			</view>
			<view class="from_item">
				<view class="label"> 每周训练频率 </view>
				<view class="value">
					<view class="select_row">
						<view :class="{ select_item: true, active: trainingFrequency == item }" @click="handleF(item)"
							v-for="(item, index) in 7" :key="item">
							{{ item+1 }}
							<view class="">
								天
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				trainingDate: [], //可训练日期
				trainingFrequency: null, //训练频率
				columns: [{
						"label": "周一",
						"value": 1
					},
					{
						"label": "周二",
						"value": 2
					},
					{
						"label": "周三",
						"value": 3
					},
					{
						"label": "周四",
						"value": 4
					},
					{
						"label": "周五",
						"value": 5
					},
					{
						"label": "周六",
						"value": 6
					},
					{
						"label": "周日",
						"value": 7
					}
				],
				trainTotalDay: null, //可训练日
				unTrainTotalDay: null //非训练日
			};
		},
		onLoad(option) {},
		methods: {
			// 点击选择频率
			handleF(item) {
				this.trainingFrequency = item
				this.trainTotalDay = Math.ceil(16 * (7 / item))
				this.unTrainTotalDay = Math.ceil(16 * (7 / item) / item * (7 - item))

				// 新增功能：当选择训练频率时，自动从周一开始选择相应天数
				this.trainingDate = []
				for (let i = 1; i <= item + 1; i++) {
					if (i <= 7) {
						this.trainingDate.push(i)
					}
				}
			},
			// 点击选择日期
			handleSelectDate(item) {
				if (!this.trainingDate.includes(item)) {
					this.trainingDate.push(item);
				} else {
					const index = this.trainingDate.indexOf(item);
					if (index > -1) {
						this.trainingDate.splice(index, 1);
					}
				}
			},
			validateForm() {
				if (this.trainingFrequency === null) {
					uni.showToast({
						title: '请选择训练频率',
						icon: 'none'
					})
					return false
				}

				if (this.trainingDate.length === 0) {
					uni.showToast({
						title: '请选择可训练日期',
						icon: 'none'
					})
					return false
				}

				// 新增功能：当选择的可训练日期小于训练频率时，进行提示
				if (this.trainingDate.length < this.trainingFrequency + 1) {
					uni.showToast({
						title: '可训练日期不能少于训练频率',
						icon: 'none'
					})
					return false
				} else if (this.trainingDate.length > this.trainingFrequency + 1) {
					uni.showToast({
						title: '可训练日期不能多于训练频率',
						icon: 'none'
					})
					return false
				}

				return true
			},
			getFormData() {
				let {
					trainingDate,
					trainingFrequency,
					trainTotalDay,
					unTrainTotalDay
				} = this
				let formData = {
					trainNum: ++trainingFrequency,
					trainDay: trainingDate.join(','),
					trainTotalDay,
					unTrainTotalDay
				}
				return formData
			}
		},
	};
</script>

<style lang="less">
	.step_d_row {
		.title {
			font-size: 40rpx;
			font-weight: 600;
			margin: 60rpx 0;
			margin-top: 0;
			color: #000;
		}

		.from_row {
			.from_item {
				margin-bottom: 60rpx;

				.label {
					margin-bottom: 20rpx;
					font-weight: 600;
					font-size: 28rpx;
				}

				.value {
					.select_row {
						width: 100%;
						display: flex;
						justify-content: space-between;

						.select_item {
							width: 45%;
							border-radius: 8px;
							text-align: center;
							padding: 15rpx 0;
							color: #000;
							border: 2rpx solid rgba(124, 124, 126, 0.1);
							margin: 0 10rpx;
						}

						.active {
							background-color: #6e58aa;
							color: #fff;
						}
					}
				}
			}
		}
	}
</style>